<template>
    <div id="modify_UserPassword">
      <div class="top">
        <span class="icon-back" @click="$router.go(-1)"></span>
        <span class="name ellipsis">修改密码</span>
        <span class="sure-btn" @click="modifyUserPassword">确定</span>
      </div>
      <div class="container">
          <p>原始密码</p>
        <el-input
        type="password"
          class="input"
          placeholder="原始密码"
          v-model="input"
          spellcheck="false"
          show-password
          clearable>
        </el-input>
        <p>新密码</p>
        <el-input
          class="input"
          type="password"
          placeholder="新密码至少为6位"
          v-model="newPassword1"
          spellcheck="false"
          show-password
          clearable>
        </el-input>
        <p>重复新密码</p>
        <el-input
          class="input"
          type="password"
          placeholder="请再次输入新密码"
          v-model="newPassword2"
          spellcheck="false"
          show-password
          clearable>
        </el-input>
        
      </div>
    </div>
</template>

<script>
    import {Input} from 'element-ui'
    import {Toast} from 'mint-ui'
    import {updateUserPassword} from '../../../api/index'
    export default {
        name: "modifyUserPassword",
        components:{
          Input
        },
        data(){
          return{
            input:null,
            newPassword1:null,
            newPassword2:null 
          }
        },
        created() {
            //   this.input = this.$route.params.userName;
            },
        methods:{
          async modifyUserPassword(){
            if (!this.input && !this.newPassword1  && !this.newPassword2){
              Toast({
                message: '密码不能为空！',
                position: 'bottom',
                duration: 2000
              });
              return;
            }else if (this.newPassword1.length <=6 || this.newPassword2.length <=6) {
              Toast({
                message: '密码至少6位！',
                position: 'bottom',
                duration: 2000
              });
              return;
            }else if (this.newPassword1 != this.newPassword2) {
              Toast({
                message: '两次密码输入不一致',
                position: 'bottom',
                duration: 2000
              });
              return;
            } else{
              if(this.storage.get("x-token")){
                let json = await updateUserPassword(this.input,this.newPassword1);
                if(json.code==0){
                 Toast({
                    message: '修改成功',
                    position: 'top',
                    duration: 2000
                });
                  this.$router.go(-1);
                }
              }
            }
          },
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  #modify_UserPassword
    width 100%
    height 100%
    font-size .3125rem
    .top
      width 100%
      height 1rem
      display flex
      justify-content center
      align-items center
      position fixed
      top 0
      left 0
      background-color #dd2727
      color #fff
      .icon-back
        font-size .4rem
        position absolute
        left .3rem
      .name
        width 60%
        font-size .345rem
        text-align center
      .sure-btn
        position absolute
        right .3rem
        font-size .3125rem
    .container
      font-size .3125rem
      position fixed
      top 1rem
      left 0
      bottom 0
      width 100%
      background-color: #f1f1f1;
      /deep/ .el-input
        margin-top 0
        input
          border none
          outline none
          font-size .3125rem
      p
        font-size .25rem
        color #888
        margin .2rem
</style>
